<style scoped>
.time {
  font-size: 14px;
}

.content {
  font-weight: bold;
  padding-left: 5px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.crud-opts {
  padding: 6px 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.crud-opts .crud-opts-right {
  margin-left: auto;
}

</style>

<template>
  <div class="app-container">
    <el-card class="box-card" v-if="page.list">
      <div slot="header" class="clearfix">
        <span>告警发送日志列表</span>
      </div>
      <!--工具栏-->
      <div class="head-container">
        <crudOperation :permission="permission"/>
      </div>
      <!--表格渲染-->
      <el-table ref="table" v-if="!this.addDialog" :data="crud.data" style="width: 100%;" v-loading="crud.loading"
                @row-dblclick="toDetails"
                @select="crud.selectChange" @select-all="crud.selectAllChange"
                @selection-change="crud.selectionChangeHandler"
                @filter-change="crud.handleFilterChange"
                :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" border stripe>
        <el-table-column v-if="columns.visible('warnDes')" :show-overflow-tooltip="true" prop="warnDes" label="告警描述"/>
        <el-table-column v-if="columns.visible('toAddr')" prop="toAddr" :show-overflow-tooltip="true" label="接收地址"/>
        <el-table-column v-if="columns.visible('sendStatus')" prop="sendStatus" label="发送状态"
                         :filters="alarmSendStatusDict" key="sendStatus"
                         filter-placement="bottom-end" :filter-multiple="false" column-key="sendStatus">
          <template slot-scope="scope">
            <el-tag size="small" :type="sendStatusFormatterType(scope.row.sendStatus)" style="width:60px;">
              {{ mailSendLogFormatter(scope.row.sendStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('sendTime')" :show-overflow-tooltip="true" prop="sendTime" label="发送时间">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.sendTime }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('crtTs')" :show-overflow-tooltip="true" prop="crtTs" label="创建时间">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.crtTs }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <alarm-details v-if="!page.list" :page="page" :details="details"/>
    <!-- 数据备份 -->
    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="crud.backUp" title="服务器交互日志备份" width="680px">
      <el-form ref="form" :inline="true" :model="form" size="small" label-width="160px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="备份日期">
              <el-date-picker style="margin-left: 50px" v-model="backUpDate" type="date" value-format="yyyy-MM-dd"
                              placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button icon="el-icon-document-delete" @click="backUpCancel()">取消</el-button>
        <el-button icon="el-icon-document-add" type="primary" @click="backUpSubmit()">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import appServer from '@/api/system/logManager'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from '@crud/extend/log/CRUD.operation'
import alarmDetails from "./components";
import backUp from '@/api/backUp/backUp'

const queryList = [{'cloumValue': 'warnDes', 'cloumName': '告警描述'}]
//默认去查询
const defaultCrud = CRUD({
  title: '邮件发送日志',
  url: '/api/mailSendLog/selectPages',
  sort: 'sort,asc',
  queryList: queryList,
  crudMethod: {...appServer}
})
const defaultForm = {
  pkId: null,
  toAddr: null,
  ccAddr: null,
  bccAddr: null,
  attachmentPath: null,
  subject: null,
  content: null,
  sendTime: null,
  sendStatus: null
}

export default {
  name: 'mailSendLog',
  components: {crudOperation, alarmDetails},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['mail_send_status'],
  data() {
    return {
      backUpDate: "",
      page: {
        list: true
      },
      details: {},
      addDialog: false,
      from: {},
      alarmSendStatusDict: [],
      alarmSendDict: [],
      permission: {
        backUp: ['warnLog:backUp'],
      }
    }
  },
  created() {
    this.alarmSendDict = this.dict.mail_send_status;
  },
  watch: {
    alarmSendDict() {
      this.$nextTick(() => {
        this.alarmSendDict.forEach(item => {
          var obj = {
            text: item.label,
            value: item.value
          }
          this.alarmSendStatusDict.push(obj)
        })
      })
    }
  },
  methods: {
    backUpCancel() {
      this.crud.backUp = false
      this.backUpDate = ""
    },
    backUpSubmit() {
      var data = {
        "dateTs": this.backUpDate,
        "bitchType": "serverLog"
      }
      backUp.backUpData(data)
        .then(() => {
          this.$notify({
            title: '成功',
            message: '数据备份成功',
            type: 'success'
          });
          this.backUpDate = ""
          this.crud.backUp = false
          this.crud.query = {}
          this.crud.params = {}
          this.crud.toQuery()
        })
        .catch(() => {
          this.$notify.error({
            title: '错误',
            message: '数据备份异常'
          });
        });
    },
    toDetails(row) {
      this.details = row
      this.page.list = false
    },
    mailSendLogFormatter(val) {
      return this.dict.label.mail_send_status[val]
    },
    sendStatusFormatterType(val) {
      if (val == 'NSEND') {
        val = 'info'
      } else if (val == 'SUCCESS') {
        val = 'success'
      } else {
        val = 'danger'
      }
      return val
    },
  }
}
</script>
